<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VIP精品起名</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="chinese-style.css">
  <style>
    body {
      font-family: "FangSong", "仿宋", "SimSun", "宋体", serif;
      background-color: var(--rice-paper);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      position: relative;
    }
    
    .navbar {
      display: flex;
      align-items: center;
      padding: 16px 20px;
      background-color: var(--rice-paper);
      border-bottom: 1px solid var(--ink-wash-2);
      position: relative;
    }
    
    .navbar:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--vermilion), var(--mountain-green), var(--indigo-blue), var(--premium-gold));
      opacity: 0.5;
    }
    
    .back-button {
      color: var(--ink-gray);
      margin-right: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .main-container {
      padding: 24px 20px 100px;
      position: relative;
    }
    
    .header {
      margin-bottom: 20px;
    }
    
    .vip-badge {
      display: inline-flex;
      align-items: center;
      background: linear-gradient(45deg, #D4AF37, #FEF9E7);
      color: #8B6914;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      margin-left: 8px;
      vertical-align: middle;
      font-weight: bold;
      box-shadow: 0 2px 4px rgba(139, 105, 20, 0.2);
    }
    
    .crown-icon {
      width: 14px;
      height: 14px;
      margin-right: 4px;
    }
    
    .content-card {
      background-color: var(--rice-paper);
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 24px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      position: relative;
      border-left: 3px solid var(--vermilion);
      overflow: hidden;
    }
    
    .vip-card {
      border: 1px solid #D4AF37;
      border-left: 3px solid #D4AF37;
    }
    
    .vip-card:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 80px;
      height: 80px;
      background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0 Q40 40, 60 0' stroke='%23D4AF37' stroke-width='0.8' fill='none' opacity='0.2'/%3E%3C/svg%3E");
      background-size: contain;
    }
    
    .content-card:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 80px;
      height: 80px;
      background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0 Q40 40, 60 0' stroke='%23ab4529' stroke-width='0.8' fill='none' opacity='0.1'/%3E%3C/svg%3E");
      background-size: contain;
      opacity: 0.1;
    }
    
    .card-section {
      margin-bottom: 20px;
    }
    
    .section-title {
      font-weight: 600;
      font-size: 18px;
      color: var(--ink-black);
      margin-bottom: 16px;
      position: relative;
      padding-left: 14px;
    }
    
    .section-title:before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 18px;
      background-color: var(--vermilion);
      border-radius: 2px;
      opacity: 0.8;
    }
    
    .vip-title:before {
      background-color: #D4AF37;
    }
    
    .form-item {
      margin-bottom: 16px;
    }
    
    .form-label {
      display: block;
      font-size: 15px;
      color: var(--ink-gray);
      margin-bottom: 8px;
    }
    
    .input-box {
      width: 100%;
      padding: 12px 16px;
      border-radius: 8px;
      border: 1px solid var(--ink-wash-2);
      background-color: var(--rice-paper-light);
      font-size: 16px;
      color: var(--ink-black);
      transition: all 0.3s;
    }
    
    .input-box:focus {
      border-color: var(--vermilion);
      box-shadow: 0 0 0 2px rgba(171, 69, 41, 0.1);
      outline: none;
    }
    
    .input-box::placeholder {
      color: var(--stone-gray);
    }
    
    .validation-msg {
      color: var(--vermilion);
      font-size: 14px;
      margin-top: 6px;
    }
    
    .toggle-hint {
      text-align: right;
      cursor: pointer;
    }
    
    .hint-text {
      color: var(--indigo-blue);
      font-size: 14px;
      text-decoration: underline;
    }
    
    .date-picker, .time-picker {
      width: 100%;
      padding: 12px 16px;
      border-radius: 8px;
      border: 1px solid var(--ink-wash-2);
      background-color: var(--rice-paper-light);
      font-size: 16px;
      color: var(--ink-black);
      position: relative;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .picker-arrow {
      color: var(--stone-gray);
      font-size: 12px;
    }
    
    .has-value {
      color: var(--ink-black);
    }
    
    .lunar-container {
      background-color: var(--rice-paper-light);
      border-radius: 8px;
      padding: 12px;
      margin-top: 16px;
    }
    
    .lunar-info {
      display: flex;
      align-items: center;
    }
    
    .lunar-icon {
      margin-right: 8px;
    }
    
    .lunar-text {
      color: var(--ink-gray);
      font-size: 14px;
    }
    
    .primary-btn {
      width: 100%;
      background-color: var(--vermilion);
      color: white;
      padding: 16px;
      border-radius: 12px;
      text-align: center;
      font-weight: 600;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
      border: none;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .vip-btn {
      background: linear-gradient(45deg, #D4AF37, #FEF9E7, #D4AF37);
      color: #8B4513;
    }
    
    .primary-btn:before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: all 0.5s;
    }
    
    .primary-btn:hover:before {
      left: 100%;
    }
    
    .primary-btn:active {
      transform: translateY(2px);
    }
    
    .primary-btn:disabled {
      background-color: var(--ink-wash-2);
      cursor: not-allowed;
    }
    
    .vip-btn:disabled {
      background: linear-gradient(45deg, #D0D0D0, #E0E0E0, #D0D0D0);
    }
    
    .bazi-result {
      animation: fadeIn 0.5s ease forwards;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .bazi-grid {
      display: flex;
      margin: 20px 0;
    }
    
    .bazi-column {
      flex: 1;
      text-align: center;
      padding: 10px;
      background-color: var(--rice-paper-light);
      margin: 0 4px;
      border-radius: 8px;
    }
    
    .bazi-value {
      font-size: 18px;
      font-weight: 600;
      color: var(--ink-black);
    }
    
    .wuxing-progress {
      margin: 20px 0;
    }
    
    .wuxing-item {
      margin-bottom: 12px;
    }
    
    .wuxing-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 6px;
    }
    
    .wuxing-element {
      font-size: 15px;
      color: var(--ink-black);
    }
    
    .wuxing-score {
      font-size: 15px;
      color: var(--indigo-blue);
      font-weight: 600;
    }
    
    .progress-bar {
      height: 8px;
      background-color: var(--rice-paper-light);
      border-radius: 4px;
      overflow: hidden;
    }
    
    .progress-inner {
      height: 100%;
      border-radius: 4px;
      transition: width 0.5s ease;
    }
    
    .jin {
      background-color: #FFD700;
    }
    
    .mu {
      background-color: #32CD32;
    }
    
    .shui {
      background-color: #1E90FF;
    }
    
    .huo {
      background-color: #FF4500;
    }
    
    .tu {
      background-color: #CD853F;
    }
    
    .xiyongshen-info {
      display: flex;
      align-items: center;
      margin: 20px 0;
      background-color: rgba(171, 69, 41, 0.05);
      padding: 12px;
      border-radius: 8px;
    }
    
    .info-label {
      font-weight: 600;
      color: var(--ink-black);
      margin-right: 8px;
    }
    
    .info-value {
      color: var(--vermilion);
      font-weight: 600;
    }
    
    .xiyongshen-explain {
      margin-top: 20px;
    }
    
    .explain-title {
      font-weight: 600;
      color: var(--ink-black);
      margin-bottom: 8px;
      font-size: 16px;
    }
    
    .explain-content {
      color: var(--ink-gray);
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 16px;
    }
    
    .expectation-input {
      width: 100%;
      height: 100px;
      padding: 12px 16px;
      border-radius: 8px;
      border: 1px solid var(--ink-wash-2);
      background-color: var(--rice-paper-light);
      font-size: 16px;
      color: var(--ink-black);
      resize: none;
      margin-bottom: 10px;
      transition: all 0.3s;
    }
    
    .expectation-input:focus {
      border-color: var(--vermilion);
      box-shadow: 0 0 0 2px rgba(171, 69, 41, 0.1);
      outline: none;
    }
    
    .word-count {
      display: block;
      text-align: right;
      font-size: 12px;
      color: var(--stone-gray);
    }
    
    .limit {
      color: var(--vermilion);
    }
    
    .section-header {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
    }
    
    .section-subtitle {
      font-weight: 600;
      font-size: 15px;
      color: var(--ink-gray);
    }
    
    .selection-hint {
      font-size: 12px;
      color: var(--stone-gray);
      margin-left: 8px;
    }
    
    .clear-btn {
      margin-left: auto;
      font-size: 12px;
      color: var(--indigo-blue);
      cursor: pointer;
    }
    
    .reference-container {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 20px;
    }
    
    .reference-item {
      flex: 1 0 calc(50% - 12px);
      min-width: 140px;
      padding: 12px 16px;
      border-radius: 8px;
      background-color: var(--rice-paper-light);
      border: 1px solid var(--ink-wash-2);
      font-size: 14px;
      color: var(--ink-gray);
      position: relative;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .reference-item:hover {
      border-color: var(--ink-wash-1);
    }
    
    .reference-item.selected {
      border-color: var(--vermilion);
      background-color: rgba(171, 69, 41, 0.05);
    }
    
    .select-indicator {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: var(--vermilion);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }
    
    .toggle-group {
      display: flex;
      align-items: center;
      margin-top: 8px;
    }
    
    .toggle-label {
      margin-right: 12px;
      font-size: 15px;
      color: var(--ink-gray);
    }
    
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 26px;
    }
    
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--ink-wash-2);
      border-radius: 34px;
      transition: .4s;
    }
    
    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      border-radius: 50%;
      transition: .4s;
    }
    
    input:checked + .toggle-slider {
      background-color: #D4AF37;
    }
    
    input:checked + .toggle-slider:before {
      transform: translateX(24px);
    }
    
    .radio-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 8px;
    }
    
    .radio-item {
      position: relative;
      display: inline-flex;
      align-items: center;
    }
    
    .radio-item input[type="radio"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .radio-label {
      padding: 8px 16px;
      border-radius: 8px;
      background-color: var(--rice-paper-light);
      border: 1px solid var(--ink-wash-2);
      font-size: 14px;
      color: var(--ink-gray);
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .radio-item input[type="radio"]:checked + .radio-label {
      border-color: #D4AF37;
      background-color: rgba(212, 175, 55, 0.1);
      color: #8B4513;
    }
    
    .twin-container {
      display: flex;
      gap: 20px;
      margin-top: 16px;
    }
    
    .twin-column {
      flex: 1;
      border-radius: 8px;
      padding: 12px;
      background-color: var(--rice-paper-light);
    }
    
    .twin-header {
      font-weight: 600;
      margin-bottom: 10px;
      text-align: center;
      padding-bottom: 6px;
      border-bottom: 1px dashed var(--ink-wash-2);
    }
    
    .disclaimer {
      font-size: 12px;
      color: var(--stone-gray);
      text-align: center;
      margin: 20px 0;
    }
    
    .loading {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 2px solid rgba(255,255,255,0.3);
      border-radius: 50%;
      border-top-color: #fff;
      animation: spin 1s ease-in-out infinite;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    .mountain-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: -1;
      opacity: 0.03;
    }
    
    .chinese-pattern {
      position: absolute;
      width: 120px;
      height: 120px;
      background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60 A60 60 0 0 1 60 0 A60 60 0 0 1 120 60 A60 60 0 0 1 60 120 A60 60 0 0 1 0 60 Z' stroke='%238c8984' stroke-width='0.5' fill='none'/%3E%3Cpath d='M30 60 A30 30 0 0 1 60 30 A30 30 0 0 1 90 60 A30 30 0 0 1 60 90 A30 30 0 0 1 30 60 Z' stroke='%238c8984' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
      opacity: 0.03;
      z-index: -1;
    }
    
    .pattern-top-right {
      top: 0;
      right: 0;
    }
    
    .pattern-bottom-left {
      bottom: 100px;
      left: 0;
    }
    
    .reuse-info {
      display: none;
    }
  </style>
</head>
<body>
  <!-- 背景装饰 -->
  <div class="mountain-bg">
    <img src="images/mountain-bg.svg" alt="山水背景" style="width:100%; height:100%; object-fit:cover;">
  </div>
  
  <div class="chinese-pattern pattern-top-right"></div>
  <div class="chinese-pattern pattern-bottom-left"></div>
  
  <!-- 顶部导航栏 -->
  <div class="navbar">
    <a href="index.html" class="back-button">
      <i data-lucide="arrow-left" class="w-6 h-6"></i>
    </a>
    <div class="text-lg font-semibold">VIP精品起名</div>
    <div class="vip-badge">
      <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238B6914' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 4 3 12h14l3-12-6 7-4-7-4 7-6-7zm3 16h14'/%3E%3C/svg%3E" class="crown-icon" alt="VIP">
      <span>尊享特权</span>
    </div>
  </div>
  
  <div class="main-container">
    <div class="header">
      <h1 class="text-2xl font-bold mb-2" style="color: var(--ink-black);">国学典故结合法</h1>
      <p class="text-base" style="color: var(--ink-gray);">结合喜用神和期望寄语推荐名字</p>
    </div>
    
    <!-- 喜用神直接输入部分 -->
    <div class="content-card">
      <div class="card-section">
        <div class="section-title">喜用神</div>
        
        <div class="form-item">
          <label class="form-label">你想起名用字属于哪些五行呢？</label>
          <input id="xiyongshenInput" class="input-box" placeholder="请输入喜用神(如：金木水)" />
          <div id="xiyongshenError" class="validation-msg" style="display: none;"></div>
        </div>
        
        <div class="toggle-hint" id="toggleBirthTimeBtn">
          <span class="hint-text">不知道喜用神？</span>
        </div>
      </div>
    </div>
    
    <!-- 出生时间部分 - 默认隐藏，点击"不知道喜用神"后显示 -->
    <div id="birthTimeSection" class="content-card" style="display: none;">
      <div class="card-section">
        <div class="section-title">通过出生时间推算</div>
        
        <div class="form-item">
          <label class="form-label">出生日期</label>
          <div id="datePicker" class="date-picker">
            <span id="dateValue">请选择出生日期</span>
            <span class="picker-arrow">▼</span>
          </div>
        </div>

        <div class="form-item">
          <label class="form-label">出生时间</label>
          <div id="timePicker" class="time-picker">
            <span id="timeValue">请选择出生时间</span>
            <span class="picker-arrow">▼</span>
          </div>
        </div>
      </div>

      <!-- 展示农历日期 -->
      <div id="lunarContainer" class="lunar-container" style="display: none;">
        <div class="lunar-info">
          <i data-lucide="info" class="w-5 h-5 mr-2" style="color: #666;"></i>
          <span id="lunarDate" class="lunar-text"></span>
        </div>
      </div>
    </div>

    <!-- 分析按钮 - 只在出生时间模式下显示 -->
    <button id="analyzeBtn" class="primary-btn" style="display: none;" disabled>
      计算八字
    </button>

    <!-- 八字分析结果 -->
    <div id="baziResult" class="bazi-result" style="display: none;">
      <div class="content-card">
        <div class="card-section">
          <div class="section-title">阴历出生时间：生辰八字</div>
          
          <div class="bazi-grid">
            <div class="bazi-column">
              <div id="baziYear" class="bazi-value"></div>
            </div>
            <div class="bazi-column">
              <div id="baziMonth" class="bazi-value"></div>
            </div>
            <div class="bazi-column">
              <div id="baziDay" class="bazi-value"></div>
            </div>
            <div class="bazi-column">
              <div id="baziHour" class="bazi-value"></div>
            </div>
          </div>
        </div>

        <div class="card-section">
          <div class="section-title">传统文化中的平衡理念：五行能量</div>
          
          <div id="wuxingProgress" class="wuxing-progress">
            <!-- 五行数据将通过JavaScript动态添加 -->
          </div>

          <div class="xiyongshen-info">
            <div class="info-label">喜用神：</div>
            <div id="xiyongshenValue" class="info-value"></div>
          </div>
          
          <!-- 喜用神说明 -->
          <div class="xiyongshen-explain">
            <div class="explain-title">生辰八字是什么？</div>
            <div class="explain-content">
              <p>出生时间 → 转换为 传统历法时间（年月日时），一般通过查询黄历即可得到，原理并不复杂，宝爸宝妈不要因为这个信息差被割韭菜了哟</p>
            </div>
            <div class="explain-title">喜用神与取名的关系</div>
            <div class="explain-content">
              <p>生辰八字中，每个字对应一种元素（如"壬=水"，"寅=木"），通过统计各元素数量，就得到了喜用神。
              在传统哲学体系中，通过元素互补来寻求平衡是重要的文化理念。根据生辰信息分析，可以发现某些元素属性可能相对薄弱，这些元素在传统文化中被认为需要适当补益。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 期望寄语部分 -->
    <div class="content-card">
      <div class="card-section">
        <div class="section-title">期望寄语</div>
        
        <div class="form-item">
          <label class="form-label">您对宝宝名字的期望</label>
          <textarea id="expectationInput" class="expectation-input" placeholder="请输入您对宝宝名字的期望（30字以内）" maxlength="30"></textarea>
          <div class="word-count" id="wordCount">0/30</div>
        </div>
      </div>
      
      <div class="card-section">
        <div class="section-header">
          <div class="section-subtitle">参考寄语</div>
          <div class="selection-hint">(可选1条)</div>
          <div class="clear-btn" id="clearBtn" style="display: none;">清空</div>
        </div>
        
        <div class="reference-container" id="referenceContainer">
          <div class="reference-item" data-reference="希望宝宝品德高尚，才华出众">
            希望宝宝品德高尚，才华出众
          </div>
          <div class="reference-item" data-reference="愿宝宝一生平安喜乐，前程似锦">
            愿宝宝一生平安喜乐，前程似锦
          </div>
          <div class="reference-item" data-reference="期望宝宝聪明伶俐，充满智慧">
            期望宝宝聪明伶俐，充满智慧
          </div>
          <div class="reference-item" data-reference="愿宝宝健康成长，快乐一生">
            愿宝宝健康成长，快乐一生
          </div>
          <div class="reference-item" data-reference="希望宝宝勇敢坚强，心怀大志">
            希望宝宝勇敢坚强，心怀大志
          </div>
          <div class="reference-item" data-reference="愿宝宝温文尔雅，待人真诚">
            愿宝宝温文尔雅，待人真诚
          </div>
        </div>
      </div>
    </div>
    
    <!-- VIP专属功能 -->
    <div class="content-card vip-card">
      <div class="card-section">
        <div class="section-title vip-title">VIP专属功能</div>
        
        <div class="form-item">
          <div class="toggle-group">
            <label class="toggle-label">双胞胎起名</label>
            <label class="toggle-switch">
              <input type="checkbox" id="twinToggle">
              <span class="toggle-slider"></span>
            </label>
          </div>
          
          <div id="twinContainer" class="twin-container" style="display: none;">
            <div class="twin-column">
              <div class="twin-header">宝宝一</div>
              <div class="radio-group">
                <label class="radio-item">
                  <input type="radio" name="twin1Gender" value="male" checked>
                  <span class="radio-label">男宝</span>
                </label>
                <label class="radio-item">
                  <input type="radio" name="twin1Gender" value="female">
                  <span class="radio-label">女宝</span>
                </label>
              </div>
            </div>
            <div class="twin-column">
              <div class="twin-header">宝宝二</div>
              <div class="radio-group">
                <label class="radio-item">
                  <input type="radio" name="twin2Gender" value="male" checked>
                  <span class="radio-label">男宝</span>
                </label>
                <label class="radio-item">
                  <input type="radio" name="twin2Gender" value="female">
                  <span class="radio-label">女宝</span>
                </label>
              </div>
            </div>
          </div>
        </div>
        
        <div class="form-item">
          <div class="toggle-group">
            <label class="toggle-label">重名率检测</label>
            <label class="toggle-switch">
              <input type="checkbox" id="duplicateCheckToggle" checked>
              <span class="toggle-slider"></span>
            </label>
          </div>
        </div>
        
        <div class="form-item">
          <label class="form-label">首选字辈</label>
          <div class="radio-group">
            <label class="radio-item">
              <input type="radio" name="charStyle" value="none" checked>
              <span class="radio-label">无要求</span>
            </label>
            <label class="radio-item">
              <input type="radio" name="charStyle" value="traditional">
              <span class="radio-label">传统字</span>
            </label>
            <label class="radio-item">
              <input type="radio" name="charStyle" value="simple">
              <span class="radio-label">简约字</span>
            </label>
            <label class="radio-item">
              <input type="radio" name="charStyle" value="rare">
              <span class="radio-label">稀少字</span>
            </label>
          </div>
        </div>
      </div>
    </div>
    
    <div class="disclaimer">
      * 内容依据传统文化研究整理，姓名选择请结合个人审美与实际情况
    </div>
    
    <button id="generateBtn" class="primary-btn vip-btn" disabled>
      生成名字
    </button>
  </div>
  
  <script src="https://unpkg.com/lucide@latest"></script>
  <script>
    lucide.createIcons();
    
    document.addEventListener('DOMContentLoaded', function() {
      // 获取用户数据
      const formData = JSON.parse(localStorage.getItem('namingFormData') || '{}');
      
      // 页面元素
      const xiyongshenInput = document.getElementById('xiyongshenInput');
      const xiyongshenError = document.getElementById('xiyongshenError');
      const toggleBirthTimeBtn = document.getElementById('toggleBirthTimeBtn');
      const birthTimeSection = document.getElementById('birthTimeSection');
      const datePicker = document.getElementById('datePicker');
      const dateValue = document.getElementById('dateValue');
      const timePicker = document.getElementById('timePicker');
      const timeValue = document.getElementById('timeValue');
      const lunarContainer = document.getElementById('lunarContainer');
      const lunarDate = document.getElementById('lunarDate');
      const analyzeBtn = document.getElementById('analyzeBtn');
      const generateBtn = document.getElementById('generateBtn');
      const baziResult = document.getElementById('baziResult');
      const expectationInput = document.getElementById('expectationInput');
      const wordCount = document.getElementById('wordCount');
      const referenceContainer = document.getElementById('referenceContainer');
      const clearBtn = document.getElementById('clearBtn');
      const twinToggle = document.getElementById('twinToggle');
      const twinContainer = document.getElementById('twinContainer');
      const duplicateCheckToggle = document.getElementById('duplicateCheckToggle');
      
      // 八字相关元素
      const baziYear = document.getElementById('baziYear');
      const baziMonth = document.getElementById('baziMonth');
      const baziDay = document.getElementById('baziDay');
      const baziHour = document.getElementById('baziHour');
      const wuxingProgress = document.getElementById('wuxingProgress');
      const xiyongshenValue = document.getElementById('xiyongshenValue');
      
      let selectedDate = '';
      let selectedTime = '';
      let customXiyongshen = '';
      let selectedReference = '';
      let expectation = '';
      let isAnalyzing = false;
      let isGenerating = false;
      let baziInfo = null;
      
      // 初始化页面
      if (formData.surname) {
        // 如果有姓氏，默认使用
      } else {
        // 如果没有姓氏，使用默认姓氏"李"
        formData.surname = '李';
      }
      
      // 验证表单
      function validateForm() {
        const hasXiyongshen = customXiyongshen || baziInfo;
        const hasExpectation = expectation.length > 0 || selectedReference;
        generateBtn.disabled = !(hasXiyongshen && hasExpectation);
      }
      
      // 喜用神输入验证
      xiyongshenInput.addEventListener('input', function() {
        customXiyongshen = this.value.trim();
        
        if (customXiyongshen) {
          const validElements = ['金', '木', '水', '火', '土'];
          const invalidChars = [...customXiyongshen].filter(char => !validElements.includes(char));
          
          if (invalidChars.length > 0) {
            xiyongshenError.textContent = `请只输入有效的五行元素：金、木、水、火、土`;
            xiyongshenError.style.display = 'block';
            customXiyongshen = '';
          } else {
            xiyongshenError.style.display = 'none';
          }
        } else {
          xiyongshenError.style.display = 'none';
        }
        
        validateForm();
      });
      
      // 期望输入监听
      expectationInput.addEventListener('input', function() {
        expectation = this.value.trim();
        wordCount.textContent = `${expectation.length}/30`;
        
        if (expectation.length >= 30) {
          wordCount.classList.add('limit');
        } else {
          wordCount.classList.remove('limit');
        }
        
        validateForm();
      });
      
      // 参考寄语选择
      referenceContainer.addEventListener('click', function(e) {
        const item = e.target.closest('.reference-item');
        if (!item) return;
        
        // 清除所有已选中项
        const allItems = document.querySelectorAll('.reference-item');
        allItems.forEach(item => {
          item.classList.remove('selected');
          const indicator = item.querySelector('.select-indicator');
          if (indicator) indicator.remove();
        });
        
        // 设置新选中项
        item.classList.add('selected');
        const indicator = document.createElement('div');
        indicator.className = 'select-indicator';
        indicator.textContent = '✓';
        item.appendChild(indicator);
        
        // 更新期望文本
        selectedReference = item.dataset.reference;
        expectationInput.value = selectedReference;
        expectation = selectedReference;
        wordCount.textContent = `${expectation.length}/30`;
        clearBtn.style.display = 'block';
        
        validateForm();
      });
      
      // 清空选择
      clearBtn.addEventListener('click', function() {
        const allItems = document.querySelectorAll('.reference-item');
        allItems.forEach(item => {
          item.classList.remove('selected');
          const indicator = item.querySelector('.select-indicator');
          if (indicator) indicator.remove();
        });
        
        selectedReference = '';
        clearBtn.style.display = 'none';
        
        // 只清空引用的文本，保留用户自己输入的内容
        if (expectationInput.value === expectation) {
          expectationInput.value = '';
          expectation = '';
          wordCount.textContent = '0/30';
        }
        
        validateForm();
      });
      
      // 切换到出生时间模式
      toggleBirthTimeBtn.addEventListener('click', function() {
        birthTimeSection.style.display = 'block';
        analyzeBtn.style.display = 'block';
      });
      
      // 日期选择
      datePicker.addEventListener('click', function() {
        // 这里应该显示日期选择器，简化为直接输入
        const date = prompt('请输入日期 (格式: YYYY-MM-DD)', selectedDate || '2000-01-01');
        if (date) {
          selectedDate = date;
          dateValue.textContent = date;
          dateValue.classList.add('has-value');
          updateAnalyzeButtonState();
        }
      });
      
      // 时间选择
      timePicker.addEventListener('click', function() {
        // 这里应该显示时间选择器，简化为直接输入
        const time = prompt('请输入时间 (格式: HH:MM)', selectedTime || '12:00');
        if (time) {
          selectedTime = time;
          timeValue.textContent = time;
          timeValue.classList.add('has-value');
          updateAnalyzeButtonState();
        }
      });
      
      // 更新分析按钮状态
      function updateAnalyzeButtonState() {
        analyzeBtn.disabled = !(selectedDate && selectedTime);
      }
      
      // 分析八字
      analyzeBtn.addEventListener('click', function() {
        if (isAnalyzing) return;
        
        isAnalyzing = true;
        analyzeBtn.innerHTML = '<span class="loading"></span> 分析中...';
        
        // 模拟分析过程
        setTimeout(function() {
          isAnalyzing = false;
          analyzeBtn.innerHTML = '计算八字';
          
          // 显示农历日期
          lunarContainer.style.display = 'block';
          lunarDate.textContent = '农历庚辰年六月初六 午时';
          
          // 显示八字结果
          baziResult.style.display = 'block';
          baziYear.textContent = '庚辰';
          baziMonth.textContent = '丙午';
          baziDay.textContent = '戊申';
          baziHour.textContent = '丁未';
          
          // 添加五行数据
          wuxingProgress.innerHTML = `
            <div class="wuxing-item">
              <div class="wuxing-header">
                <span class="wuxing-element">金</span>
                <span class="wuxing-score">3</span>
              </div>
              <div class="progress-bar">
                <div class="progress-inner jin" style="width: 60%"></div>
              </div>
            </div>
            <div class="wuxing-item">
              <div class="wuxing-header">
                <span class="wuxing-element">木</span>
                <span class="wuxing-score">1</span>
              </div>
              <div class="progress-bar">
                <div class="progress-inner mu" style="width: 20%"></div>
              </div>
            </div>
            <div class="wuxing-item">
              <div class="wuxing-header">
                <span class="wuxing-element">水</span>
                <span class="wuxing-score">1</span>
              </div>
              <div class="progress-bar">
                <div class="progress-inner shui" style="width: 20%"></div>
              </div>
            </div>
            <div class="wuxing-item">
              <div class="wuxing-header">
                <span class="wuxing-element">火</span>
                <span class="wuxing-score">2</span>
              </div>
              <div class="progress-bar">
                <div class="progress-inner huo" style="width: 40%"></div>
              </div>
            </div>
            <div class="wuxing-item">
              <div class="wuxing-header">
                <span class="wuxing-element">土</span>
                <span class="wuxing-score">3</span>
              </div>
              <div class="progress-bar">
                <div class="progress-inner tu" style="width: 60%"></div>
              </div>
            </div>
          `;
          
          // 设置喜用神
          xiyongshenValue.textContent = '木水';
          
          // 保存八字信息
          baziInfo = {
            year: '庚辰',
            month: '丙午',
            day: '戊申',
            hour: '丁未',
            xiyongshen: '木水'
          };
          
          // 清空直接输入的喜用神
          xiyongshenInput.value = '';
          customXiyongshen = '';
          
          validateForm();
        }, 2000);
      });
      
      // 双胞胎切换
      twinToggle.addEventListener('change', function() {
        if (this.checked) {
          twinContainer.style.display = 'flex';
        } else {
          twinContainer.style.display = 'none';
        }
      });
      
      // 生成名字
      generateBtn.addEventListener('click', function() {
        if (isGenerating) return;
        
        isGenerating = true;
        generateBtn.innerHTML = '<span class="loading"></span> 生成中...';
        
        // 获取喜用神
        const xiyongshen = baziInfo ? baziInfo.xiyongshen : customXiyongshen;
        
        // 获取其他选项
        const isDuplicate = duplicateCheckToggle.checked;
        const isTwin = twinToggle.checked;
        const twin1Gender = document.querySelector('input[name="twin1Gender"]:checked')?.value || 'male';
        const twin2Gender = document.querySelector('input[name="twin2Gender"]:checked')?.value || 'male';
        const charStyle = document.querySelector('input[name="charStyle"]:checked')?.value || 'none';
        
        // 模拟生成名字
        setTimeout(function() {
          isGenerating = false;
          generateBtn.innerHTML = '生成名字';
          
          // 这里应该跳转到名字结果页面，简化为弹窗提示
          const message = `
            生成成功！
            姓氏：${formData.surname}
            喜用神：${xiyongshen}
            期望寄语：${expectation}
            双胞胎：${isTwin ? '是' : '否'}
            重名检测：${isDuplicate ? '是' : '否'}
            首选字辈：${charStyle === 'none' ? '无要求' : charStyle === 'traditional' ? '传统字' : charStyle === 'simple' ? '简约字' : '稀少字'}
          `;
          
          alert(message);
          
          // 跳转到结果页面
          // window.location.href = 'premium-result.html';
        }, 2000);
      });
    });
  </script>
</body>
</html>